import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
// import { Link, withRouter } from 'dva/router';
import { WingBlank, WhiteSpace, List, Flex } from 'antd-mobile';

const FamilyListPage = ({ dispatch, router, location, members, ...rest }) => {
  const goto = (member) => dispatch(routerRedux.push({
    pathname: `${location.pathname}/update`,
    state: {
      title: '编辑家庭成员',
      memberId: member.id,
    },
  }));
  return (
    <WingBlank size="md">
      <WhiteSpace />
      <Link to={{
        pathname: `${location.pathname}/add`,
        state: { title: '添加家庭成员' },
      }}>
        <List>
          <List.Item>
            <div style={{ textAlign: 'center'}}>{"添加家庭成员"}</div>
          </List.Item>
        </List>
      </Link>
      <Flex justify="center" style={{fontSize: '0.25rem', color: '#888', marginTop: '0.15rem'}}>上限为10人</Flex>
      <WhiteSpace />
      <WhiteSpace />
      {members.length ? (
        <List>
          {members.map(member =>
            <List.Item
              key={member.id}
              arrow="horizontal"
              extra={`(${member.relation})`}
              onClick={() => goto(member)}>
              {member.name}
            </List.Item>
          )}
        </List>
      ) : null}
    </WingBlank>
  );
};

export default connect(({ family }) => ({
  ...family,
}))(FamilyListPage);
